<template>
  <div class="container">
    <input :type="type ? type : 'text'" :style="`width:${width}`" :value="modelValue"
      @input="eventFuntion(<HTMLInputElement>$event.target)" ref="literYellowEL" />
    <div v-if="type === 'checkbox'" class="checkboc-indicator">
      <div class="innerBg"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { nextTick, ref, watch } from 'vue';
const Props = defineProps<{
  modelValue?: any
  type?: string
  width?: string
}>()

const literYellowEL = ref()
watch(() => Props.modelValue, () => {
  if (literYellowEL.value.type !== 'checkbox') { return }
  literYellowEL.value.checked = Props.modelValue
})
const emit = defineEmits(['update:modelValue'])
const eventFuntion = (inputEL: HTMLInputElement) => {
  if (inputEL.type === 'checkbox') {
    emit('update:modelValue', inputEL.checked)
  } else if (inputEL.type === 'text' || inputEL.type === 'number') {
    emit('update:modelValue', inputEL.value)
  }
}


</script>

<style scoped lang="scss">
.container {
  display: inline-block;
  position: relative;

  display: flex;
  // justify-content: center;
  align-items: center;

  input {
    font-size: 2rem;
    text-indent: 1em;
    background-color: transparent;
  }

  // input:focus {
  // position: relative;
  // top: 0;
  // z-index: 99;
  // background-color: red;
  // }

  input[type='text'],
  input[type='number'] {
    border: none;
    border-bottom: .0625rem solid black;
  }



}
</style>

/* 表单元素type为checkbox时实现自定义背景色样式表*/
<style lang="scss" scoped>
input[type='checkbox'] {
  position: relative;
  z-index: 9;
  height: 2rem;
  width: 2rem;
}

input[type='checkbox']:checked {
  opacity: 0;
}

.checkboc-indicator {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 2rem;
  width: 2rem;
  border: .075rem solid gray;
  border-radius: .1875rem;
  padding: .125rem;
  opacity: 0;
}

input[type='checkbox']:checked+.checkboc-indicator {
  opacity: 1;

  .innerBg {
    height: 100%;
    width: 100%;
    background-color: #f49f30;
  }
}
</style>
